<template>
  <preview-item-loader v-bind="$props" v-on="$listeners">
    <draggable v-model="compData.children"
               class="wh100"
               animation="300">
      <template v-for="(comp, index) in compData.children">
        <component :is="compList[comp.type]['comps'][comp.name]"
                   :compData="comp"
                   :compIndex="index"
                   :pCompIndex="compIndex"
                   :previewList="previewList"
        />
      </template>
    </draggable>
  </preview-item-loader>
</template>

<script>
  import CompMixins from "@/mixins/CompMixins";
  import PreviewItemLoader from "@/components/PreviewItemLoader";
  import Draggable from 'vuedraggable'

  export default {
    name: "CompSection",
    type: 'layout',
    title: 'section',
    desc: '用于定义区域',
    components: { PreviewItemLoader, Draggable },
    mixins: [CompMixins]
  }
</script>
